﻿<table id="datatable"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="add">新增模块</a>
        <a lay-event="expand" class="layui-btn layui-btn-sm">全部展开</a>
        <a lay-event="fold" class="layui-btn layui-btn-sm">全部收起</a>
    </div>
</script>
<script type="text/html" id="rowbar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增下级</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        treeTable.render({
            elem: '#datatable',
            id: 'datatable',
            even: true,
            toolbar: "#toolbar",
            tree: {
                customName: {
                    id: 'Id',
                    pid: 'ParentId',
                    name: "ResourceName"
                },
                data: {
                    isSimpleData: true,
                    cascade: "parent"
                }
            },
            url: '/SysResource/Index',
            method: 'post',
            height: 'full-35',
            cols: [
                [
                    {
                        type: 'checkbox',
                        hide: true
                    },
                    {
                        field: 'ResourceName',
                        minWidth: 200,
                        title: '模块名称'
                    },
                    {
                        field: 'Id',
                        title: '模块编号'
                    },
                    {
                        field: 'ResourceUrl',
                        title: '模块链接'
                    },
                    {
                        field: 'ResourceIcon',
                        title: '模块图标'
                    },
                    {
                        field: 'SortNumber',
                        width: 80,
                        align: 'center',
                        title: '排序号'
                    },
                    {
                        field: 'ResourceType',
                        width: 100,
                        align: 'center',
                        templet: function (d) {
                            if (d.ResourceType == 1) {
                                return '菜单';
                            } else if (d.ResourceType == 2) {
                                return '按钮';
                            }
                        },
                        title: '模块类型'
                    },
                    {
                        field: 'ResourceState',
                        width: 100,
                        align: 'center',
                        templet: function (d) {
                            if (d.ResourceState == 0) {
                                return '<font color="red">禁用</font>';
                            } else if (d.ResourceState == 1) {
                                return '启用';
                            }
                        },
                        title: '模块状态'
                    },
                    {
                        templet: '#rowbar',
                        width: 200,
                        align: 'center',
                        title: '操作'
                    }
                ]
            ],
            parseData: function (res) {
                return {
                    "code": res.Code == 200 ? 0 : res.Code, //解析接口状态
                    "msg": res.Message, //解析提示文本
                    "data": res.Data,
                    "count": res.Count
                };
            },
            done: function () {
                treeTable.expandAll("datatable", true)
            }
        });

        treeTable.on('toolbar(datatable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    add(0);
                    break;
                case 'expand':
                    treeTable.expandAll("datatable", true)
                    break;
                case 'fold':
                    treeTable.expandAll("datatable", false)
                    break;
            };
            return false;
        });
        //监听工具条
        treeTable.on('tool(datatable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'add':
                    add(data.Id);
                    break;
                case 'del':
                    layer.confirm('确定删除该条数据吗？', function (index) {
                        $.ajax({
                            url: '/SysResource/Delete' + '/' + data.Id,
                            success: function (res) {
                                if (res.Code == 200) {
                                    layer.msg('删除成功');
                                    treeTable.reload("datatable");
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2,
                        title: '编辑模块',
                        area: ['360px', '465px'],
                        content: "/SysResource/Edit/" + data.Id,
                        end: function () {
                            treeTable.reload("datatable");
                        },
                    });
                    break;
            }
        });

        function add(parentId) {
            var index = layer.open({
                title: '新增模块',
                type: 2,
                area: ['400px', '465px'],
                content: "/SysResource/Add/" + parentId,
                end: function () {
                    treeTable.reload("datatable");
                }
            });
        }
    });
</script>